<script setup lang="ts">
  import { computed } from 'vue'
  import { StrUtil } from '@xtail/core'
  import { STextEllipsis } from '../STextEllipsis'
  import tinycolor2 from 'tinycolor2'
  import { SIcon } from '../SIcon'
  import { Card1PropsType } from './types'

  defineOptions({
    name: 'SCard1'
  })

  const props = withDefaults(defineProps<Card1PropsType>(), {
    iconType: 'SIconIconify',
    iconColor: '#409EFF',
    iconBgOpacity: 0.25,
    iconClass: '',
    iconStyle: '',
    title: '',
    titleEllipsisProps: {} as any,
    titleClass: '',
    titleStyle: '',
    subTitle: '',
    subTitleEllipsisProps: {} as any,
    subTitleClass: '',
    subTitleStyle: '',
    boxShadow: true,
    hoverBoxShadow: true,
    cardClass: '',
    cardStyle: ''
  })

  const iconStyleComputed = computed(() => {
    const color = tinycolor2(props.iconColor)
    color.setAlpha(props.iconBgOpacity)
    if (StrUtil.isStr(props.iconStyle))
      return `background: ${color.toRgbString()}; ${props.iconStyle}`
    return {
      background: color.toRgbString(),
      ...props.iconStyle
    }
  })

  const cardClassComputed = computed(() => {
    if (StrUtil.isStr(props.cardClass))
      return (
        (props.boxShadow ? 's-card-1--box-shadow ' : '') +
        (props.hoverBoxShadow ? 's-card-1--hover-box-shadow ' : '') +
        props.cardClass
      )
    return [
      props.boxShadow ? 's-card-1--box-shadow' : '',
      props.hoverBoxShadow ? 's-card-1--hover-box-shadow' : '',
      ...props.cardClass
    ]
  })
</script>

<template>
  <div class="s-card-1" :class="cardClassComputed" :style="cardStyle">
    <div class="s-card-1__top">
      <div class="s-card-1__top__left">
        <slot name="icon">
          <div
            v-if="iconProps"
            class="s-card-1__top__left__icon"
            :class="iconClass"
            :style="iconStyleComputed"
          >
            <s-icon
              :icon-type="iconType"
              :icon-props="{ width: 32, height: 32, color: iconColor, ...iconProps }"
            />
          </div>
        </slot>
        <div class="s-card-1__top__left__title">
          <slot name="title">
            <div v-if="title" :class="titleClass" :style="titleStyle">
              <s-text-ellipsis v-bind="titleEllipsisProps">
                {{ title }}
              </s-text-ellipsis>
            </div>
          </slot>
          <slot name="sub-title">
            <div
              v-if="subTitle"
              class="s-card-1__top__left__sub-title"
              :class="subTitleClass"
              :style="subTitleStyle"
            >
              <s-text-ellipsis v-bind="subTitleEllipsisProps">
                {{ subTitle }}
              </s-text-ellipsis>
            </div>
          </slot>
        </div>
      </div>
      <div class="s-card-1__top__right">
        <slot name="actions" />
      </div>
    </div>
    <div class="s-card-1__content">
      <slot name="content" />
    </div>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
